<template>
  <el-card shadow="never"
           :style="{height: gadgetHeight + 'px'}"
           class="aui-card--fill">
    <div class=control-section>
      <div class=content-wrapper
           v-loading="loading">

        <ejs-chart
                   ref="botuserlinechart"
                   :theme='theme'
                    :style="{height: gadgetHeight-10 + 'px'}"
                    align='center'
                    :width='chartWidth'
                   :title='gadgetSetting.title'
                   :primaryXAxis='gadgetSetting.primaryXAxis'
                   :primaryYAxis='gadgetSetting.primaryYAxis'
                   :tooltip='gadgetSetting.tooltip'
                   :chartArea='gadgetSetting.chartArea'
                   >
          <e-series-collection>
            <e-series :dataSource='dataSource'
                      :type='gadgetSetting.type'
                      xName='date'
                      yName='dayNumber'
                      :name='gadgetSetting.name'
                      width=2
                      :marker='gadgetSetting.marker'> </e-series>
            <!-- <e-series :dataSource='dataSource'
                      :type='gadgetSetting.type'
                      xName='date'
                      yName='point'

                      :name='gadgetSetting.name'
                      width=2
                      :marker='gadgetSetting.marker'> </e-series> -->
          </e-series-collection>
        </ejs-chart>
        <!-- <div v-else
             class="gadget-no-data">
          <el-image @click="query()" :src='noDataImageUrl'
                    fit='fill'></el-image>
        </div> -->
      </div>
    </div>
    <model   :showSetting='queryModelDefaultSetting.showSetting' @queryModelClosed='queryModelClosed'
    :dataInfo='queryModelDefaultSetting.dataInfo' :updateGadget="upgradeGadgetSetting"/>
  </el-card>
</template>

<script>
import mixinGadgetViewModule from '@/mixins/gadget-view-module'

let selectedTheme = location.hash.split('/')[1]
selectedTheme = selectedTheme || 'Material'
let theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1)).replace(/-dark/i, 'Dark')

export default ({
  mixins: [mixinGadgetViewModule],
  components: { model: () => import('@/components/gadget/query-model/query-model') },
  data: function () {
    return {
      theme: theme,
      dataSource: [ ],
      fullData: [],
      gadgetSetting: null,
      loading: false,
      chartWidth: '700px',
      queryModelDefaultSetting: {
        showSetting: false,
        dataInfo: {
          businessId: this.pageId,
          gadgetId: this.id,
          gadgetType: 'bottriggeruserreportgadget',
          gadgetSetting: {
            type: 'Line',
            name: '',
            title: 'Bot Trigger Report',
            primaryXAxis: {
              title: 'Dates',
              valueType: 'Category',
              majorGridLines: {
                width: 0
              }
            },
            primaryYAxis: {
              title: 'Count',
              labelFormat: '{value}',
              rangePadding: 'None',
              minimum: 0,
              maximum: 200,
              interval: 100,
              lineStyle: {
                width: 0
              },
              majorTickLines: {
                width: 0
              },
              minorTickLines: {
                width: 0
              }
            },
            chartArea: {
              border: {
                width: 0
              }
            },
            marker: {
              visible: true,
              height: 10,
              width: 10
            },
            tooltip: {
              enable: true
            }
          }
        }
      }
    }
  },

  created () {
    this.gadgetHeight = (this.gadgetInfo.h * 20) - 20
    this.query()
    this.subscribeMessage('runReport', this.query)
    this.$store.state.isWidget = false
  },
  methods: {
    queryModelClosed () {
      this.queryModelDefaultSetting.showSetting = false
      this.query()
    },
    showQueryModel () {
      this.queryModelDefaultSetting.showSetting = true
    },
    resized (i, newH, newW, newHPx, newWPx) {
      this.gadgetHeight = (newH * 20) - 20
      this.gadgetWidth = newWPx
      this.chartWidth = (newWPx - 50) + 'px'
    },
    containerResizedEvent (i, newH, newW, newHPx, newWPx) {
      this.chartWidth = (newWPx - 50) + 'px'
    },
    query () {
      this.gadgetSetting = this.queryModelDefaultSetting.dataInfo.gadgetSetting
      this.loading = true
      this.isHasData = false
      var _self = this
      var slicer = { ..._self.slicer }
      var param = {
        createDateFrom: slicer.dateFrom,
        createDateTo: slicer.dateTo,
        ruleId: 88,
        code: this.code,
        gadgettype: this.wgadgettype,
        widgetName: this.wName
      }
      this.$interface.clientDesired.getBotTriggerUserReportApi(param).then(({ data: res }) => {
        _self.verifyHasData(res)
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        if (res.data) {
          _self.afterQuery(res.data[0].numberList)
          _self.dataSource = res.data[0].numberList

          this.loading = false
          this.isHasData = true
        }
      }).catch(() => {
        this.loading = false
        this.isHasData = true
      })
    },
    afterQuery (data) {
      var maxtotalNum = this._.maxBy(data, function (o) { return o.dayNumber })
      var maxpoint = this._.maxBy(data, function (o) { return o.point })
      var mintotalNum = this._.minBy(data, function (o) { return o.dayNumber })
      var minpoint = this._.minBy(data, function (o) { return o.point })
      var max = maxtotalNum.dayNumber > maxpoint.point ? maxtotalNum.dayNumber : maxpoint.point
      var min = mintotalNum.dayNumber < minpoint.point ? mintotalNum.dayNumber : minpoint.point
      this.gadgetSetting.primaryYAxis.maximum = Math.ceil(max)
      this.gadgetSetting.primaryYAxis.minimum = Math.floor(min)
      if ((max - min) > 5) {
        this.gadgetSetting.primaryYAxis.interval = this._.ceil(this._.divide([(max - min), 5]))
      }
      this.gadgetSetting.primaryYAxis.interval = Math.ceil(max)
    }
  }

})
</script>
<style scoped>
</style>
